<template>
	<div>
		<CityHeader></CityHeader>
		<CitySearch :cities='cites'></CitySearch>
		<CityList :city='hotCities' :cites='cites' :letter='letter'></CityList>
		<CityAlphabet 
			:cites='cites'
			@change='handleLetterChange'
		></CityAlphabet>
	</div>
</template>

<script>
	import CityHeader from './components/Header';
	import CitySearch from './components/Search';
	import CityList from './components/List';
	import CityAlphabet from './components/Alphabet';
	/* 引入axios第三方ajax包 */
	import axios from 'axios';


	export default {
		name: 'city',
		components: {
			CityHeader,
			CitySearch,
			CityList,
			CityAlphabet
		},
		data() {
			return {
				hotCities: [],
				cites:{},
				letter:''
			}
		},
		methods: {
			handleLetterChange(e){
				console.log('接收到的值'+e);
				/* 传递给list子组件 */
				this.letter=e;
			},
			/* 
				发送ajax请求获取城市数据json文件
			*/
			getCityInfo() {
				axios.get('/api/city.json')
					.then(this.getCityScc)
			},
			/* 请求成功 */
			getCityScc(res) {
				res = res.data;
				console.log('请求成功');
				this.hotCities = res.data.hotCities;
				this.cites = res.data.cities;
			}

		},
		mounted() {
				this.getCityInfo();
		}
	}
</script>

<style lang="less" scoped="scoped">

</style>
